<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>报销申请 - 报销系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        body {
            min-height: 100vh;
            background-color: #f8f9fa;
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .content {
            padding: 2rem 0;
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,.1);
        }
        .card-header {
            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
            color: white;
            border-radius: 15px 15px 0 0 !important;
            padding: 1.5rem;
        }
        .card-header h2 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
        }
        .card-body {
            padding: 2rem;
        }
        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .form-control:focus {
            box-shadow: none;
            border-color: #0d6efd;
        }
        .btn-submit {
            padding: 0.8rem 2rem;
            font-weight: 500;
        }
        .back-link {
            display: inline-flex;
            align-items: center;
            color: #6c757d;
            text-decoration: none;
            margin-bottom: 1rem;
        }
        .back-link:hover {
            color: #0d6efd;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">报销审批系统</a>
            <div class="d-flex">
                <a th:href="@{/}" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-house-door me-1"></i>返回首页
                </a>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="content">
        <div class="container">
            <a th:href="@{/}" class="back-link">
                <i class="bi bi-arrow-left me-2"></i>返回首页
            </a>

            <div class="card">
                <div class="card-header">
                    <h2><i class="bi bi-receipt me-2"></i>提交报销申请</h2>
                </div>
                <div class="card-body">
                    <form th:action="@{/expense/submit}" method="post" class="needs-validation" novalidate>
                        <div class="mb-4">
                            <label for="amount" class="form-label">报销金额</label>
                            <div class="input-group">
                                <span class="input-group-text">¥</span>
                                <input type="number" class="form-control" id="amount" name="amount" 
                                       step="0.01" min="0.01" required placeholder="请输入报销金额">
                                <div class="invalid-feedback">
                                    请输入有效的报销金额
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="description" class="form-label">报销说明</label>
                            <textarea class="form-control" id="description" name="description" 
                                      rows="3" placeholder="请输入报销说明（可选）"></textarea>
                        </div>

                        <div class="text-end">
                            <a th:href="@{/}" class="btn btn-light me-2">取消</a>
                            <button type="submit" class="btn btn-primary btn-submit">
                                <i class="bi bi-send me-1"></i>提交申请
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms).forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>
</body>
</html> 